<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="header">
      <text class="title">预警机制</text>
      <text class="subtitle">AI智能预警分析</text>
    </view>

    <!-- 预警参数设置 -->
    <view class="parameter-section">
      <view class="section-title">
        <text>预警参数设置</text>
      </view>
      
      <view class="parameter-form">
        <view class="form-item">
          <text class="form-label">当前浓度：</text>
          <input class="input" type="number" v-model="currentLevel" placeholder="请输入当前污染物浓度" />
        </view>
        
        <view class="form-item">
          <text class="form-label">预警阈值：</text>
          <input class="input" type="number" v-model="threshold" placeholder="请输入预警阈值" />
        </view>
        
        <view class="form-item">
          <text class="form-label">预警级别：</text>
          <picker @change="onWarningLevelChange" :value="warningLevelIndex" :range="warningLevels">
            <view class="picker">
              {{ warningLevels[warningLevelIndex] }}
            </view>
          </picker>
        </view>
        
        <button class="analyze-btn" @click="startEarlyWarning" :disabled="!selectedFactory">
          生成预警分析
        </button>
      </view>
    </view>

    <!-- 预警结果 -->
    <view class="result-section" v-if="warningResult">
      <view class="section-title">
        <text>预警分析结果</text>
        <text class="close-btn" @click="clearResult">×</text>
      </view>
      
      <view class="result-content">
        <text class="result-text">{{ warningResult }}</text>
      </view>
    </view>

    <!-- 工厂选择 -->
    <view class="factory-section">
      <view class="section-title">
        <text>选择预警工厂</text>
      </view>
      
      <view class="factory-form">
        <view class="form-item">
          <text class="form-label">工厂：</text>
          <picker @change="onFactoryChange" :value="selectedFactoryIndex" :range="factoryNames">
            <view class="picker">
              {{ selectedFactory ? selectedFactory.factoryName : '请选择工厂' }}
            </view>
          </picker>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { pollutionApi } from '@/api/pollution.js'

export default {
  data() {
    return {
      factoryList: [],
      selectedFactory: null,
      selectedFactoryIndex: 0,
      currentLevel: 180.5,
      threshold: 150.0,
      warningLevelIndex: 0,
      warningLevels: ['蓝色预警', '黄色预警', '橙色预警', '红色预警'],
      warningResult: ''
    }
  },
  
  computed: {
    factoryNames() {
      return this.factoryList.map(factory => factory.factoryName)
    }
  },
  
  onLoad() {
    this.loadFactoryData()
  },
  
  methods: {
    // 加载工厂数据
    async loadFactoryData() {
      try {
        uni.showLoading({ title: '加载中...' })
        const res = await pollutionApi.getFactoryAnalysis()
        
        if (res.code === 200) {
          this.factoryList = res.obj || []
          if (this.factoryList.length > 0) {
            this.selectedFactory = this.factoryList[0]
          }
        } else {
          uni.showToast({
            title: res.msg || '加载失败',
            icon: 'error'
          })
        }
      } catch (error) {
        console.error('加载数据失败:', error)
        uni.showToast({
          title: '网络错误',
          icon: 'error'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 工厂选择变化
    onFactoryChange(e) {
      const index = e.detail.value
      this.selectedFactoryIndex = index
      this.selectedFactory = this.factoryList[index]
    },
    
    // 预警级别变化
    onWarningLevelChange(e) {
      this.warningLevelIndex = e.detail.value
    },
    
    // 开始预警分析
    async startEarlyWarning() {
      if (!this.selectedFactory) {
        uni.showToast({
          title: '请选择工厂',
          icon: 'none'
        })
        return
      }
      
      try {
        uni.showLoading({ title: '分析中...' })
        
        const res = await pollutionApi.generateEarlyWarning(
          this.selectedFactory.factoryId, 
          parseFloat(this.currentLevel), 
          parseFloat(this.threshold)
        )
        
        if (res.code === 200) {
          this.warningResult = res.obj.warningResult || '预警分析完成'
          
          uni.showToast({
            title: '分析完成',
            icon: 'success'
          })
        } else {
          uni.showToast({
            title: '分析失败',
            icon: 'error'
          })
        }
      } catch (error) {
        console.error('分析失败:', error)
        uni.showToast({
          title: '网络错误',
          icon: 'error'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 清除结果
    clearResult() {
      this.warningResult = ''
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20rpx;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
  padding: 40rpx 20rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #fff;
  display: block;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  display: block;
}

.parameter-section, .result-section, .factory-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.close-btn {
  font-size: 40rpx;
  color: #999;
  cursor: pointer;
}

.parameter-form, .factory-form {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.form-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  width: 160rpx;
}

.picker {
  flex: 1;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 10rpx;
  border: 2rpx solid #e9ecef;
  font-size: 28rpx;
  color: #333;
}

.input {
  flex: 1;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 10rpx;
  border: 2rpx solid #e9ecef;
  font-size: 28rpx;
  color: #333;
}

.analyze-btn {
  margin-top: 20rpx;
  padding: 25rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
  border-radius: 15rpx;
  font-size: 30rpx;
  font-weight: bold;
}

.analyze-btn:disabled {
  background: #ccc;
  color: #999;
}

.result-content {
  background: #f8f9fa;
  padding: 20rpx;
  border-radius: 10rpx;
  border: 1rpx solid #e9ecef;
  max-height: 400rpx;
  overflow-y: auto;
}

.result-text {
  font-size: 26rpx;
  line-height: 1.6;
  color: #333;
  white-space: pre-wrap;
  word-break: break-word;
}
</style>

